<template>
  <Dialog :appDialog="appDialog"
    ><div class="list">
      <div class="title">每日推送规则</div>
      <el-form :form="day" label-width="140px" class="content">
        <el-form-item label="提醒执行员工：">
          <el-row :gutter="20">
            <el-col class="tips">每日固定时间点发送应用消息通知员工去完成既定推送任务，若员工已手动标记【完成】，则到既定时间不再推送。</el-col>
          </el-row>
          <div v-if="day.work_user.times.length"
            ><el-row :gutter="20">
              <el-col :span="8" style="margin-bottom: 10px" v-for="(items, index) in day.work_user.times" :key="index"
                ><div class="time"
                  ><span class="startfull">时间段{{ index + 1 }}</span
                  ><el-time-picker v-model="day.work_user.times[index]" placeholder="选择时间" value-format="HH:mm" format="HH:mm" @change="gettime" /> <el-icon class="del" @click="del(index, day)"> <delete /> </el-icon></div
              ></el-col>
            </el-row>
          </div>
          <el-button @click="addtime(day)">添加时间</el-button>
        </el-form-item>
        <el-form-item label="提醒质检人：">
          <el-row :gutter="20">
            <el-col class="tips">每日固定时间点发送应用消息通知质检人，去质检执行的员工任务是否达标。</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 10px"
              ><div class="time"><span class="start">每日</span><el-time-picker v-model="day.qa.times" placeholder="选择时间" value-format="HH:mm" format="HH:mm" @change="gettime" /></div
            ></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="任务反馈：">
          <el-row :gutter="20">
            <el-col class="tips">每日固定时间点发送应用消息通知创建人和指定成员，所有成员完成的情况（针对执行成员而言，质检后会立刻反馈给执行人员）</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 10px"
              ><div class="time"><span class="start">每日</span><el-time-picker v-model="day.report.times" placeholder="选择时间" value-format="HH:mm" format="HH:mm" @change="gettime" /> </div
            ></el-col>
          </el-row>
        </el-form-item>
      </el-form> </div
    ><div class="list">
      <div class="title">每周推送规则</div>
      <el-form :form="week" label-width="140px" class="content">
        <el-form-item label="提醒执行员工：">
          <el-row :gutter="20">
            <el-col class="tips">每周固定时间点发送应用消息通知员工去完成既定推送任务，若员工已手动标记【完成】，则到既定时间不再推送。</el-col>
          </el-row>
          <div>
            <el-checkbox-group v-model="week.work_user.day" style="margin-bottom: 10px">
              <el-checkbox-button :label="1">星期一</el-checkbox-button>
              <el-checkbox-button :label="2">星期二</el-checkbox-button>
              <el-checkbox-button :label="3">星期三</el-checkbox-button>
              <el-checkbox-button :label="4">星期四</el-checkbox-button>
              <el-checkbox-button :label="5">星期五</el-checkbox-button>
              <el-checkbox-button :label="6">星期六</el-checkbox-button>
              <el-checkbox-button :label="7">星期日</el-checkbox-button>
            </el-checkbox-group>
          </div>
          <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 10px" v-for="(items, index) in week.work_user.times" :key="index"
              ><div class="time"
                ><span class="startfull">时间段{{ index + 1 }}</span
                ><el-time-picker v-model="week.work_user.times[index]" placeholder="选择时间" value-format="HH:mm" format="HH:mm" @change="gettime" /> <el-icon class="del" @click="del(index, week)"> <delete /> </el-icon></div
            ></el-col>
          </el-row>
          <el-button @click="addtime(week)">添加时间</el-button>
        </el-form-item>
        <el-form-item label="提醒质检人：">
          <el-row :gutter="20">
            <el-col class="tips">每周固定时间点发送应用消息通知质检人，去质检执行的员工任务是否达标。</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 10px"
              ><div class="time"
                ><span class="start">每周</span><el-select v-model="week.qa.day" placeholder="选择日期"> <el-option v-for="item in weektimes" :key="item.value" :label="item.label" :value="item.value" /></el-select> </div
            ></el-col>
            <el-col :span="8"
              ><div class="time"><el-time-picker v-model="week.qa.times" placeholder="选择时间" value-format="HH:mm" format="HH:mm" @change="gettime" /><span class="start"></span></div
            ></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="任务反馈：">
          <el-row :gutter="20">
            <el-col class="tips">每周固定时间点发送应用消息通知创建人和指定成员，所有成员完成的情况（针对执行成员而言，质检后会立刻反馈给执行人员）</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 10px"
              ><div class="time"
                ><span class="start">每周</span><el-select v-model="week.report.day" placeholder="选择日期"> <el-option v-for="item in weektimes" :key="item.value" :label="item.label" :value="item.value" /></el-select> </div
            ></el-col>
            <el-col :span="8"
              ><div class="time"><el-time-picker v-model="week.report.times" placeholder="选择时间" value-format="HH:mm" format="HH:mm" @change="gettime" /><span class="start"></span></div
            ></el-col>
          </el-row>
        </el-form-item>
      </el-form> </div
    ><div class="list">
      <div class="title">每月推送规则</div>
      <el-form :form="month" label-width="140px">
        <el-form-item label="提醒执行员工：">
          <el-row :gutter="20">
            <el-col class="tips">每月固定时间点发送应用消息通知员工去完成既定推送任务，若员工已手动标记【完成】，则到既定时间不再推送。</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 10px"
              ><div class="time"
                ><span class="start">每月</span><el-select multiple v-model="month.work_user.day" placeholder="选择日期" @change="changeMonth"> <el-option v-for="item in daytimes" :key="item.value" :label="item.label" :value="item.value" /></el-select
                ><div class="del"></div></div
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 10px" v-for="(items, index) in month.work_user.times" :key="index"
              ><div class="time"
                ><span class="startfull">时间段{{ index + 1 }}</span
                ><el-time-picker v-model="month.work_user.times[index]" placeholder="选择时间" value-format="HH:mm" format="HH:mm" @change="gettime" /> <el-icon class="del" @click="del(index, month)"> <delete /> </el-icon></div
            ></el-col>
          </el-row>
          <el-button @click="addtime(month)">添加时间</el-button>
        </el-form-item>
        <el-form-item label="提醒质检人：">
          <el-row :gutter="20">
            <el-col class="tips">每月固定时间点发送应用消息通知质检人，去质检执行的员工任务是否达标。</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 10px"
              ><div class="time"
                ><span class="start">每月</span><el-select v-model="month.qa.day" placeholder="选择日期"> <el-option v-for="item in daytimes" :key="item.value" :label="item.label" :value="item.value" /></el-select> </div
            ></el-col>
            <el-col :span="8"
              ><div class="time"><el-time-picker v-model="month.qa.times" placeholder="选择时间" value-format="HH:mm" format="HH:mm" @change="gettime" /><span class="start"></span></div
            ></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="任务反馈：">
          <el-row :gutter="20">
            <el-col class="tips">每月固定时间点发送应用消息通知创建人和指定成员，所有成员完成的情况（针对执行成员而言，质检后会立刻反馈给执行人员）</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" style="margin-bottom: 10px"
              ><div class="time"
                ><span class="start">每月</span><el-select v-model="month.report.day" placeholder="选择日期" @change="delMonth"> <el-option v-for="item in daytimes" :key="item.value" :label="item.label" :value="item.value" /></el-select> </div
            ></el-col>
            <el-col :span="8"
              ><div class="time"><el-time-picker v-model="month.report.times" placeholder="选择时间" value-format="HH:mm" format="HH:mm" @change="gettime" /><span class="start"></span></div
            ></el-col>
          </el-row>
        </el-form-item>
      </el-form> </div
  ></Dialog>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import Dialog from '@/components/Dialog.vue'
  import { setAlertlist, getAlertlist } from '@/api/smartMarketing/marketAutomation/friendCircleSop'
  const time = ref('')
  let day = reactive({
    work_user: {
      times: []
    },
    qa: {
      times: ''
    },
    report: {
      times: ''
    }
  })
  let week = reactive({
    work_user: {
      day: [],
      times: []
    },
    qa: {
      day: '',

      times: ''
    },
    report: {
      day: '',
      times: ''
    }
  })
  let month = reactive({
    work_user: {
      day: [],
      times: []
    },

    qa: {
      day: '',
      times: ''
    },

    report: {
      day: '',
      times: ''
    }
  })
  const weektimes = ref([
    {
      value: 1,
      label: '星期一'
    },
    {
      value: 2,
      label: '星期二'
    },
    {
      value: 3,
      label: '星期三'
    },
    {
      value: 4,
      label: '星期四'
    },
    {
      value: 5,
      label: '星期五'
    },
    {
      value: 6,
      label: '星期六'
    },
    {
      value: 7,
      label: '星期日'
    }
  ])
  const daytimes = ref([])
  const cancelHandel = () => {
    appDialog.visible = false
  }
  const submitHandel = () => {
    if (day.work_user.times.length == 0 || week.work_user.times.length == 0 || month.work_user.times.length == 0) {
      ElMessage.warning('请添加提醒员工执行的时间')
      return
    }
    if (day.work_user.times.some((item) => item == '') || week.work_user.times.some((item) => item == '') || month.work_user.times.some((item) => item == '')) {
      ElMessage.warning('时间段时间不能为空')
      return
    }
    if (week.work_user.day.length == 0 || month.work_user.day.length == 0) {
      ElMessage.warning('请添加提醒员工执行的时间')
      return
    }
    setAlertlist({ day, week, month }).then((res) => {
      appDialog.visible = false
    })
  }
  const appDialog = reactive({
    visible: false,
    title: '提醒规则设置',
    width: '1000px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
  })
  const addtime = (data: any) => {
    data.work_user.times.push('')
  }
  const del = (num: any, data: any) => {
    data.work_user.times.splice(num, 1)
  }
  const changeMonth = (val: any) => {
    month.work_user.day = val
  }
  // 获取设置提醒数据
  const getAlerData = () => {
    getAlertlist().then((res: any) => {
      Object.assign(day, res.day)
      Object.assign(week, res.week)
      Object.assign(month, res.month)
    })
  }
  const getDay = () => {
    for (let i = 1; i < 32; i++) {
      let data = { value: '', label: '' }
      data.value = i
      data.label = i + '日'
      daytimes.value.push(data)
    }
  }
  watch(
    () => appDialog.visible,
    (val) => {
      if (val) {
        getDay()
        getAlerData()
      }
    }
  )
  defineExpose({ appDialog })
</script>
<style lang="scss" scoped>
  .list {
    padding: 10px 0 20px 0px;
    font-family: PingFangSC-Medium, PingFang SC;
    .el-form-item {
      margin-bottom: 0;
    }
    .el-date-editor {
      width: 100%;
    }
    .tips {
      font-weight: 400;
      color: #33302d;
    }
    .content {
      padding-bottom: 14px;
      border-bottom: 1px solid #dcdfe6;
    }
    .title {
      font-size: 14px;
      font-weight: 500;
      color: #33302d;
      line-height: 16px;
    }
    .el-row,
    .el-col {
      width: 100%;
    }
    .time {
      display: flex;
      align-items: center;
      width: 100%;
      .start {
        display: inline-block;
        width: 40px;
      }
      .startfull {
        display: inline-block;
        width: 80px;
        padding-right: 12px;
      }

      .del {
        width: 15%;
        cursor: pointer;
      }
    }
  }
</style>
